<template>
	<view class="content">
		<map id="map" :latitude="latitude" :longitude="longitude" :scale="scale" :polyline="polyline" :markers="markers"
			show-location :enable-traffic="traffic">
			<cover-view slot="callout">
				<cover-view marker-id="1" class="coverView">
					<block v-if="status == 6">
						司机已到达上车点
					</block>
					<block v-else-if="status == 7">
						您已上车
					</block>
					<block v-else-if="status == 8">
						剩余<cover-view class="contents">{{tranMille(carPrice.realTimeSurplusMileage)}}</cover-view>,
						还需<cover-view class="contents">{{carPrice.realTimeSurplusTimeDrivergo}}</cover-view>分钟
					</block>
					<block v-else>
						距您<cover-view class="contents">{{tranMille(carPrice.realTimeSurplusMileage)}}</cover-view>,
						剩余<cover-view class="contents">{{carPrice.realTimeSurplusTimeDrivergo}}</cover-view>分钟
					</block>
				</cover-view>
			</cover-view>
		</map>
		<view class="detail">
			<view class="row" v-if="status != 10">
				<view class="col-7 security_title">
					<view class="row" @click="$public.navTo('public/security')">
						<view class="col-8 t_center">
							<image src="../../static/index/security.png" mode="heightFix"></image>
						</view>
						<view class="col-16 t_left t_size_26">
							安全中心
						</view>
					</view>
				</view>
			</view>
			<!-- 用户已取消 -->
			<view class="yhyqx" v-if="status == 1 || status == 2">
				<view class="ddqxcg">
					<view class="col-24 qxcgtt">
						{{status == 1 ? '订单取消成功' : '司机取消订单'}}
					</view>
					<view class="col-24 kycxdc t_size_26">
						订单已取消，您可以重新打车。
					</view>
				</view>
				<view class="qxcgddxx">
					<view class="row">
						<view class="col-3 t_center" style="color: #FFAE00;">
							·
						</view>
						<view class="col-21">
							{{cancelDesc.createTime}}
						</view>
					</view>
					<view class="row">
						<view class="col-3 t_center" style="color: #6CBF30;">
							·
						</view>
						<view class="col-21">
							{{cancelDesc.getOnPoint}}
						</view>
					</view>
					<view class="row">
						<view class="col-3 t_center" style="color: #07B0FF;">
							·
						</view>
						<view class="col-21">
							{{cancelDesc.getOffPoint}}
						</view>
					</view>
				</view>
				<view class="qxcgbtn">
					<button type="primary" @click="orderAgain()">重新打车</button>
				</view>
			</view>
			<!-- 排队中 -->
			<view class="pdz row" v-if="status == 3">
				<view class="col-16">
					<view class="col-24 status_text">
						排队中...
					</view>
					<view class="col-24 status_sj">
						司机马上接单了，请耐心等待
					</view>
				</view>
				<view class="col-8">
					<button type="primary" @click="cancel()">取消订单</button>
				</view>
			</view>
			<!-- 司机已接单 && 司机已到达 -->
			<view class="sjyjd" v-if="status > 3 && status < 7">
				<view class="pdz row">
					<view class="col-16">
						<view class="col-24 status_text">
							{{status == 4 ? '司机已接单' : status == 5 ? '司机正在前往上车点' :'司机已到达上车点'}}
						</view>
						<view class="col-24 status_sj">
							请准时前往上车地点
						</view>
					</view>
					<view class="col-8">
						<button type="primary" @click="cancel()">取消订单</button>
					</view>
				</view>
				<view class="row driver">
					<view class="col-5 img t_center">
						<view class="head_img">
							<image :src="carDesc.driverPhoto" mode="scaleToFill"></image>
						</view>
						<view class="head_name">
							{{carDesc.driverName.substr(0,1)}}师傅
						</view>
					</view>
					<view class="col-12 pdl-2">
						<view class="row d_content">
							<view class="col-24 license">
								{{carDesc.carPlateNo}}
							</view>
							<view class="model">
								{{carDesc.carColor}}|{{carDesc.carBrand}}{{carDesc.carType }}
							</view>
							<view class="row score">
								<view>
									<uni-rate :isFill="true" :value="carDesc.driverScore" :readonly="true"></uni-rate>
								</view>
								<view class="off-1">
									{{carDesc.driverScore}}分
								</view>
							</view>
						</view>
					</view>
					<view class="col-5 t_right phone">
						<image src="../../static/trip/dh@2x.png" mode="heightFix"></image>
					</view>
				</view>
			</view>
			<!-- 行程开始 -->
			<view class="xcks" v-if=" status == 7 || status == 8">
				<view class="row driver">
					<view class="col-5 img t_center">
						<view class="head_img">
							<image :src="carDesc.driverPhoto" mode="scaleToFill"></image>
						</view>
						<view class="head_name">
							胡师傅
						</view>
					</view>
					<view class="col-12 pdl-2">
						<view class="row d_content">
							<view class="col-24 license">
								粤A·77777
							</view>
							<view class="model">
								黑色|劳斯莱斯幻影
							</view>
							<view class="row score">
								<view>
									<uni-rate :isFill="true" :value="4.5" :readonly="true"></uni-rate>
								</view>
								<view class="off-1">
									4.5分
								</view>
							</view>
						</view>
					</view>
					<view class="col-5 t_right phone">
						<image src="../../static/trip/dh@2x.png" mode="heightFix"></image>
					</view>
				</view>
			</view>
			<!-- 已确认送达 -->
			<view class="yqrsd" v-if="status == 9">
				<view class="row price">
					<view class="col-12">
						<view class="row">
							<view class="col-24 pay_price t_size_bold">
								{{carPrice.realTimePrice}} <text class="t_size_26"> 元</text>
							</view>
							<view class="col-24 yh_price t_size_31">
								已优惠<text> {{carPrice.preferentialAmount || 0}} </text>元
							</view>
						</view>
					</view>
					<view class="col-12">
						<view class="row price_mx" @click="$public.navTo('trip/trip_pay_definite?orderId=' + id)">
							费用明细
							<image src="../../static/trip/yjt@2x.png" mode="heightFix"></image>
						</view>
					</view>
				</view>
				<view class="row driver">
					<view class="col-5 img t_center">
						<view class="head_img">
							<image :src="carDesc.driverPhoto" mode="scaleToFill"></image>
						</view>
						<view class="head_name">
							{{carDesc.driverName.substr(0,1)}}师傅
						</view>
					</view>
					<view class="col-12 pdl-2">
						<view class="row d_content">
							<view class="col-24 license">
								<!-- 粤A·77777 -->
								{{carDesc.carPlateNo}}
							</view>
							<view class="model">
								{{carDesc.carColor}}|{{carDesc.carBrand}}{{carDesc.carType }}
							</view>
							<view class="row score">
								<view>
									<uni-rate :isFill="true" :value="carDesc.driverScore" :readonly="true"></uni-rate>
								</view>
								<view class="off-1">
									{{carDesc.driverScore}}分
								</view>
							</view>
						</view>
					</view>
					<view class="col-5 t_right phone">
						<image src="../../static/trip/dh@2x.png" mode="heightFix"></image>
					</view>
				</view>
				<view class="btn">
					<button type="primary" @click="$public.navTo('public/security2')">一键报警</button>
					<button type="warn" @click="zfmbTab =!zfmbTab">立即支付</button>
				</view>
			</view>
			<!-- 用户待评价 -->
			<view class="yhdpj" v-if="status == 10">
				<view class="pjDemo">
					<view class="row demo_title">
						<view class="col-2">

						</view>
						<view class="col-20 t_center">
							评价
						</view>
						<view class="col-2 t_center">
							<image src="../../static/index/close_icon.png" mode="heightFix"></image>
						</view>
					</view>
					<view class="row demoRate">
						<uni-rate :isFill="true" :size="25" :margin="10" :value="labelRate" @change="rateChange">
						</uni-rate>
					</view>
					<view class="row demoLabel">
						<view class="col-2">

						</view>
						<view class="col-20">
							<view class="row" style="justify-content: space-between;">
								<view class="col-7 t_center" v-for="(item,index) in labelList" :key="index"
									:class="labelNodes.indexOf(item) != -1 ? 'active' : ''" @click="nodes(item)">
									{{item}}
								</view>
							</view>
						</view>
						<view class="col-2">

						</view>
					</view>
					<view class="demoInput">
						<textarea v-model="labelInput" placeholder="夸夸司机把" />
					</view>
					<view class="demoBtn">
						<button type="primary" @click="evaluate()">匿名提交</button>
					</view>
				</view>
			</view>
			<!-- 用户已评价 -->
			<view class="yhypj" v-if="status == 11">
				<view class="contents">
					<view class="row price">
						<view class="col-12">
							<view class="row">
								<view class="col-24 pay_price t_size_bold">
									{{carPrice.realTimePrice}} <text class="t_size_26"> 元</text>
								</view>
								<view class="col-24 yh_price t_size_31">
									已优惠<text> {{carPrice.preferentialAmount || 0}} </text>元
								</view>
							</view>
						</view>
						<view class="col-12">
							<view class="row price_mx" @click="$public.navTo('trip/trip_pay_definite?orderId=' + id)">
								费用明细
								<image src="../../static/trip/yjt@2x.png" mode="heightFix"></image>
							</view>
						</view>
					</view>
					<view class="row driver">
						<view class="col-5 img t_center">
							<view class="head_img">
								<image :src="carDesc.driverPhoto" mode="scaleToFill"></image>
							</view>
							<view class="head_name">
								{{carDesc.driverName.substr(0,1)}}师傅
							</view>
						</view>
						<view class="col-12 pdl-2">
							<view class="row d_content">
								<view class="col-24 license">
									<!-- 粤A·77777 -->
									{{carDesc.carPlateNo}}
								</view>
								<view class="model">
									{{carDesc.carColor}}|{{carDesc.carBrand}}{{carDesc.carType }}
								</view>
								<view class="row score">
									<view>
										<uni-rate :isFill="true" :value="carDesc.driverScore" :readonly="true">
										</uni-rate>
									</view>
									<view class="off-1">
										{{carDesc.driverScore}}分
									</view>
								</view>
							</view>
						</view>
						<view class="col-5 t_right phone">
							<image src="../../static/trip/dh@2x.png" mode="heightFix"></image>
						</view>
					</view>
					<view class="row demoRate">
						<uni-rate :isFill="true" :size="25" :margin="10" :value="carDesc.evaluateScore"
							:readonly="true"></uni-rate>{{carDesc.evaluateScore}}分
					</view>
					<view class="row demoLabel">
						<view class="col-2">

						</view>
						<view class="col-20">
							<view class="row">
								<view class="col-7 t_center active set-1" v-for="(item,index) in evaluateTag.split(',')"
									:key="index">
									{{item}}
								</view>
							</view>
						</view>
						<view class="col-2">

						</view>
					</view>
					<view class="row demoInput">
						{{carDesc.evaluateMsg}}
					</view>
				</view>
				<view class="btn">
					<button type="primary" @click="$public.navTo('public/security2')">一键报警</button>
					<button type="warn" open-type="share" v-if="shareid == -1">行程分享</button>
				</view>
			</view>
		</view>
		<view :class="zfmbTab?'zfmb_tab':'zfmb'">
			<view class="container">
				<view class="row title">
					<view class="col-3">

					</view>
					<view class="col-18 t_center">
						立即支付
					</view>
					<view class="col-3 t_center">
						<image src="../../static/index/close_icon.png" @click="zfmbTab = !zfmbTab" mode="heightFix">
						</image>
					</view>
				</view>
				<view class="row ddxq">
					<view class="col-24 ddjekt t_center">
						订单金额（元）
					</view>
					<view class="col-24 t_center ddzfje">
						{{carPrice.orderAmount}}
					</view>
					<view class="row fyyw">
						<view>费用疑问</view>
						<view>
							<image src="../../static/trip/yjt@2x.png" mode="heightFix"></image>
						</view>
					</view>
				</view>
				<view class="col-24 fymx">
					<view class="col-24 fymxkt">
						费用明细
					</view>
					<view class="row fyje">
						<view class="col-12">
							费用
						</view>
						<view class="col-12 t_right">
							{{carPrice.realTimePrice}}元
						</view>
					</view>
					<view class="row yhq">
						<view class="col-13">
							优惠券
						</view>
						<view class="col-11">
							<view class="row">
								<view>{{carPrice.preferentialAmount || 0}}</view>
								<view>
									<image src="../../static/public/ljt.png" mode="heightFix"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="btn">
					<button type="primary" @click="orderPay()">立即支付</button>
				</view>
			</view>
		</view>
		<view class="login" v-if="login_result == false">
			<view class="button">
				<button type="primary" @click="wxLogin()">微信授权登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	const QQMapWX = require('../../common/js/qqmap-wx-jssdk.min.js');
	var qqmask;
	import uni_rate from '@/components/uni-rate/uni-rate.vue'
	import {
		mapState
	} from 'vuex';
	export default {
		computed: mapState(['traffic']),
		components: {
			"uni-rate": uni_rate
		},
		data() {
			return {
				polyline: [{
					width: 11,
					color: '#25cf55',
					arrowLine: true,
					points: []
				}],
				markers: [],
				latitude: 0,
				longitude: 0,
				status: 3, //市内约车订单状态：1用户已取消 2司机已取消 3派单中 4已分配车辆 5司机正在前往 6司机已到达 7乘客已上车 8正在送达乘客 9已确认送达 10乘客已支付 11派单超时 13退款中 14退款完成 
				id: 944,
				scale: 15,
				carDesc: {
					carBrand: "",
					carColor: "",
					carPlateNo: "",
					carType: "",
					driverName: "",
					driverId: "",
					driverName: "",
					driverNowLat: "",
					driverNowLon: "",
					driverPhoto: "",
					driverScore: "",
					driverTelephone: "",
					evaluateScore: 0,
					evaluateMsg: ''
				},
				carPrice: {
					orderAmount: 0,
					preferentialAmount: 0,
					realTimePrice: 0,
					realTimeSurplusMileage: 0, //剩余距离 ,
					realTimeSurplusMileageDrivergo: 0, //司机前往目的地-剩余距离 ,
					realTimeSurplusTime: 0, //剩余时间 ,
					realTimeSurplusTimeDrivergo: 0, //司机前往目的地-剩余时间 ,
				},
				superPlus: {
					nowPrice: 0,
					surplusMileage: 0,
					surplusTime: 0
				},
				zfmbTab: true,
				cancelDesc: {
					getOnPoint: '',
					getOnLon: '',
					getOnLat: '',
					getOffPoint: '',
					getOffLon: '',
					getOffLat: '',
					createTime: ''
				},
				login_result: true,
				labelList: [],
				labelNodes: [],
				labelRate: 0,
				labelInput: '',
				evaluateTag: '',
				share_tab: false,
				shareid:-1,
				shareId: 0
			}
		},
		onLoad(option) {
			let that = this;
			qqmask = new QQMapWX({
				key: 'FFJBZ-32W6O-ZTPWU-S6G2B-AJB3Z-DKBV7'
			})
			if(option.sharingId){
				this.shareid = option.sharingId;
				if(uni.getStorageSync('token') == ''){
					this.login_result = false;
					uni.setStorageSync('sharingId',option.sharingId);
					// this.$api.wxLogin();
				}else{
					this.share_load();
					this.sockets();
				}
			}else{
				this.id = option.orderId;
				this.status = option.status;
				this.sockets();
			}
		},
		onShow() {
			if(this.shareid == -1){
				this.cover_load();
				this.sockets();
			}
			if(uni.getStorageSync('sharingId') != ''){
				this.share_load();
				this.sockets();
				uni.removeStorageSync('sharingId');
			}
		},
		methods: {
			async cover_load() {
				this.markers = [];
				this.polyline[0].points = [];
				uni.showLoading()
				let res = await this.$api.request(this.$api.order.insideInfo, {
					orderId: this.id
				});
				if (res) {
					this.canvas_map(res)
					uni.hideLoading();
				}
			},
			//行程分享
			async share_load(){
				let res = await this.$api.request(this.$api.order.shareInfo,{
					sharingId: this.shareid
				})
				if(res){
					this.canvas_map(res);
				}
			},
			canvas_map(res){
				let that = this;
				let map = uni.createMapContext('map');
				//添加起点和终点标记
				let startIcon = '../../static/public/zd@2x.png';
				let overIcon = '../../static/public/qd@2x.png';
				this.status = res.orderStateInside;
				if (this.status > 3 && this.status < 12) {
					for (var key in this.carDesc) {
						this.carDesc[key] = res[key];
					}
				}
				if (this.status == 9 || this.status == 10 || this.status == 11 || this.status == 5) {
					for (var key in this.carPrice) {
						this.carPrice[key] = res[key];
					}
					if (this.status == 9) {
						this.zfmbTab = false;
					}
				}
				if (this.status == 1 || this.status == 2) {
					for (var key in this.cancelDesc) {
						this.cancelDesc[key] = res[key];
					}
				}
				if (this.status == 10) {
					this.labelLoad();
				}
				if (this.status == 11) {
					this.evaluateTag = res.evaluateTag;
				}
				if (this.status > 3 && this.status < 8) {
					startIcon = '../../static/public/bc_s.png';
					if (this.status == 6 || this.status == 7) {
						this.markers.push({
							id: 1,
							latitude: res.polylineDrivergo[res.polylineDrivergo.length - 1].lat,
							longitude: res.polylineDrivergo[res.polylineDrivergo.length - 1].lon,
							iconPath: startIcon,
							rotate: 0,
							width: 30,
							height: 30,
							customCallout: {
								anchorY: 0,
								anchorX: 0,
								display: 'ALWAYS'
							}
						})
					} else {
						res.polylineDrivergo.forEach(item => {
							this.polyline[0].points.push({
								latitude: item.lat,
								longitude: item.lon
							})
						})
						overIcon = '../../static/public/qd@2x.png';
						this.markers.push({
							id: 1,
							latitude: this.carDesc.driverNowLat,
							longitude: this.carDesc.driverNowLon,
							iconPath: startIcon,
							rotate: 0,
							width: 30,
							height: 30,
							customCallout: {
								anchorY: 0,
								anchorX: 0,
								display: 'ALWAYS'
							}
						});
						this.markers.push({
							latitude: this.polyline[0].points[this.polyline[0].points.length - 1].latitude,
							longitude: this.polyline[0].points[this.polyline[0].points.length - 1]
								.longitude,
							iconPath: overIcon,
							width: 40,
							height: 56
						});
						map.includePoints({
							padding: [that.status == 11 ? 150 : 70],
							points: [{
								latitude: this.polyline[0].points[0].latitude,
								longitude: this.polyline[0].points[0].longitude
							}, {
								latitude: this.polyline[0].points[this.polyline[0].points.length -
										1]
									.latitude,
								longitude: this.polyline[0].points[this.polyline[0].points.length -
										1]
									.longitude
							}]
						});
					}
				} else {
					if (this.status == 11) {
						res.polylineDrivergo.forEach(item => {
							this.polyline[0].points.push({
								latitude: item.lat,
								longitude: item.lon
							})
						})
					} else {
						res.polyline.forEach(item => {
							this.polyline[0].points.push({
								latitude: item.lat,
								longitude: item.lon
							})
						})
					}
					this.markers.push({
						latitude: this.polyline[0].points[0].latitude,
						longitude: this.polyline[0].points[0].longitude,
						iconPath: overIcon,
						width: 40,
						height: 56
					});
					this.markers.push({
						latitude: this.polyline[0].points[this.polyline[0].points.length - 1].latitude,
						longitude: this.polyline[0].points[this.polyline[0].points.length - 1].longitude,
						iconPath: startIcon,
						width: 40,
						height: 56
					});
					if (this.status == 8) {
						startIcon = '../../static/public/bc_s.png';
						this.markers.push({
							id: 1,
							latitude: res.driverNowLat,
							longitude: res.driverNowLon,
							iconPath: startIcon,
							rotate: 0,
							width: 30,
							height: 30,
							customCallout: {
								anchorY: 0,
								anchorX: 0,
								display: 'ALWAYS'
							}
						})
					}
					map.includePoints({
						padding: [that.status == 11 ? 150 : 70],
						points: [{
							latitude: this.polyline[0].points[0].latitude,
							longitude: this.polyline[0].points[0].longitude
						}, {
							latitude: this.polyline[0].points[this.polyline[0].points.length - 1]
								.latitude,
							longitude: this.polyline[0].points[this.polyline[0].points.length - 1]
								.longitude
						}]
					});
				}
			},
			// 订单评价标签获取
			async labelLoad() {
				let res = await this.$api.request(this.$api.order.getEvaluateTageList);
				this.labelList = res;
			},
			// 取消订单
			async cancel() {
				let res = await this.$api.request(this.$api.order.cancelReturn, {
					orderId: this.id
				});
				if (res) {
					this.$public.navTo('index/status_cancel?res=' + JSON.stringify(res))
				}
			},
			// 订单支付
			async orderPay() {
				let that = this;
				let res = await this.$api.request(this.$api.order.paySub, {
					// couponId : 0,
					orderFrom: 1,
					payType: 2,
					orderId: this.id
				});
				if (res) {
					uni.requestPayment({
						provider: ['wxpay'],
						nonceStr: res.nonceStr,
						package: res.package,
						paySign: res.paySign,
						signType: res.signType,
						timeStamp: res.timeStamp,
						success(res) {
							that.zfmbTab = true;
							that.cover_load();
						}
					})
				}
			},
			// 重新下单
			async orderAgain() {
				let that = this;
				qqmask.reverseGeocoder({
					location: {
						latitude: this.cancelDesc.getOffLat,
						longitude: this.cancelDesc.getOffLon
					},
					get_poi: 0,
					poi_options: 'policy=3',
					success: (result) => {
						uni.setStorage({
							key: 'location3',
							data: {
								title: that.cancelDesc.getOffPoint,
								latitude: this.cancelDesc.getOffLat,
								longitude: this.cancelDesc.getOffLon,
								cityCode: result.result.ad_info.city_code.substr(3, 6),
								adcode: result.result.ad_info.adcode
							},
							success() {
								that.$public.redTo('index/index');
							}
						})
					}
				})
			},
			// 打开sockets 监听
			sockets() {
				let that = this;
				this.$socket.init();
				
				this.$socket.socketTask.onMessage((res) => {
					console.log(res)
					let data = JSON.parse(res.data);
					if (data.data) {
						if (data.data.newsType == 2) {
							that.status = data.data.orderStateInside;
							if (that.status == 4 || that.status == 5 || that.status == 6 || that.status == 7 ||
								that.status == 8 || that.status == 9) {
								that.cover_load();
							}
						} else if (data.data.newsType == 1) {
							that.carDesc.driverNowLat = data.data.driverNowLat;
							that.carDesc.driverNowLon = data.data.driverNowLon;
							for (var key in that.superPlus) {
								that.superPlus[key] = data.data[key];
							}
							if (that.status > 3 && that.status < 8) {
								that.markers[0].latitude = that.carDesc.driverNowLat;
								that.markers[0].longitude = that.carDesc.driverNowLon;
								that.markers[0].rotate = data.data.carAngle;
								that.carPrice.realTimeSurplusMileage = data.data.surplusMileage;
								that.carPrice.realTimeSurplusTimeDrivergo = data.data.surplusTime;
							} else if (that.status == 8) {
								that.markers[2].latitude = that.carDesc.driverNowLat;
								that.markers[2].longitude = that.carDesc.driverNowLon;
								that.markers[2].rotate = data.data.carAngle;
								that.carPrice.realTimeSurplusMileage = data.data.surplusMileage;
								that.carPrice.realTimeSurplusTimeDrivergo = data.data.surplusTime;
							}
						}
					}
				})
			},
			// 匿名提交评价
			async evaluate() {
				let obj = {
					evaluateScore: this.labelRate,
					evaluateMsg: this.labelInput,
					evaluateTag: '',
					orderId: this.id
				}
				this.labelNodes.forEach(item => {
					obj.evaluateTag += `${item},`
				})
				obj.evaluateTag = obj.evaluateTag.substr(0, obj.evaluateTag.length - 1);
				let res = await this.$api.request(this.$api.order.subEvaluate, obj);
				if (res == undefined) {
					this.cover_load();
				}
			},
			// 评价的标签选择
			nodes(item) {
				if (this.labelNodes.indexOf(item) != -1) {
					this.labelNodes.remove(item)
				} else {
					this.labelNodes.push(item)
				}
			},
			//评价星星
			rateChange(e) {
				this.labelRate = e.value;
			},
			// 米单位转换
			tranMille(mille) {
				// console.log(mille);
				if (mille >= 1000) {
					mille = (mille / 1000).toFixed(1) + 'km'
				} else {
					mille += 'm';
				}
				return mille
			},
			wxLogin(){
				let that = this;
				wx.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						wx.login({
							success:async (e)=>{
								let result = await that.$api.request(that.$api.user.getUserByCode,{
									code: e.code,
									nickName: res.userInfo.nickName,
									photo: res.userInfo.avatarUrl
								})
								if(result){
									that.login_result = true;
									if(result.telephone == ''){
										uni.setStorageSync('login_result',JSON.stringify(result))
										that.$public.navTo(`login/login`)
									}else{
										uni.setStorageSync('token',result.accessToken);
										let res_Info = await that.$api.request(that.$api.user.getinfo, {
											token: uni.getStorageSync('token')
										});
										if (res_Info) {
											uni.setStorageSync('userInfo', res_Info)
										}
									}
									uni.hideLoading()
								}
							}
						})
					},
					complete(e) {
						console.log(e)
					}
				})
			}
		},
		async onShareAppMessage(res) {
			let result = await this.$api.request(this.$api.order.shareAdd,{orderId:this.id});
			this.shareId = result.sharingId;
			if (res.from === 'button' && this.shareId != 0) { // 来自页面内分享按钮
				return {
					title: '行程分享',
					path: '/pages/index/status?sharingId=' + this.shareId
				}
			}
		},
		watch:{
			status(n,o){
				console.log(n,o)
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100vw;
		height: 100vh;

		map {
			width: 100%;
			height: 80%;
		}

		.coverView {
			display: flex;
			justify-content: center;
			padding: 11rpx 25rpx;
			height: 40rpx;
			font-size: 26rpx;
			line-height: 40rpx;
			border-radius: 31rpx;
			color: #333333;
			background-color: #FFFFFF;
			border: 1rpx solid #ededed;

			.contents {
				height: 40rpx;
				line-height: 40rpx;
				color: #0089E9;
			}
		}

		.detail {
			width: 92%;
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 0 4%;
			z-index: 7;

			.security_title {
				background-color: #FFFFFF;
				border-radius: 32rpx;
				height: 64rpx;
				line-height: 64rpx;

				.t_center {
					margin-top: 12rpx;
					height: 40rpx;

					image {
						height: 100%;
					}
				}

				.t_left {
					color: #333333;
				}
			}

			// 排队中pdz
			.pdz {
				width: 92%;
				height: 100rpx;
				margin: 30rpx 0 50rpx 0;
				padding: 50rpx 4%;
				border-radius: 10rpx;
				background-color: #FFFFFF;
				box-shadow: 0px 15rpx 20rpx 0px #EDEDED;

				.status_text {
					font-size: 36rpx;
					color: #333333;
					font-weight: bold;
					height: 60rpx;
					line-height: 60rpx;
				}

				.status_sj {
					font-size: 26rpx;
					height: 40rpx;
					line-height: 40rpx;
					color: #999999;
					overflow: hidden;
				}

				button[type="primary"] {
					font-size: 26rpx;
					color: #999999;
					border: 1px solid #999999;
					height: 61rpx;
					line-height: 61rpx;
					margin-top: 20rpx;
					border-radius: 30rpx;
					background-color: #FFFFFF;
				}
			}

			// 司机已接单sjyjd,司机已到达sjydd,行程开始xcks
			.xcks,
			.sjyjd,
			.sjydd {
				width: 92%;
				padding: 0 4%;
				margin: 30rpx 0 50rpx 0;
				border-radius: 10rpx;
				background-color: #FFFFFF;
				box-shadow: 0px 15rpx 20rpx 0px #EDEDED;

				.pdz {
					width: 100%;
					height: 100rpx;
					padding: 25rpx 0;
					box-shadow: none;
				}

				.driver {
					border-top: 1px solid #EDEDED;
					width: 100%;
					height: 150rpx;
					padding: 25rpx 0;

					.img {
						height: 150rpx;
						position: relative;

						.head_img {
							width: 100%;
							height: 120rpx;

							image {
								margin-top: 15rpx;
								width: 120rpx;
								height: 100%;
							}
						}

						.head_name {
							width: 100%;
							position: absolute;
							bottom: 0;
							left: 0;
							color: #FFFFFF;
							background-color: #1A1A1A;
							height: 40rpx;
							line-height: 40rpx;
							border-radius: 20rpx;
						}
					}

					.d_content {
						height: 150rpx;

						.license {
							width: 100%;
							height: 60rpx;
							line-height: 60rpx;
							font-weight: bold;
							color: #333333;
						}

						.model {
							width: 100%;
							height: 40rpx;
							line-height: 40rpx;
							color: #999999;
						}

						.score {
							height: 50rpx;
							align-items: center;

							.off-1 {
								color: #FFAE00;
							}
						}
					}

					.phone {
						image {
							height: 90rpx;
							margin-top: 30rpx;
						}
					}
				}
			}

			// 行程开始xcks
			// 行程开始xcks
			.xcks,
			.yqrsd,
			.yhyzf,
			.yhypj {
				.driver {
					width: 92%;
					padding: 30rpx 4%;
					margin: 30rpx 0;
					border-radius: 10rpx;
					background-color: #FFFFFF;
					box-shadow: 0px 15rpx 20rpx 0px #EDEDED;

					.img {
						height: 150rpx;
						position: relative;

						.head_img {
							width: 100%;
							height: 120rpx;

							image {
								margin-top: 15rpx;
								width: 120rpx;
								height: 100%;
							}
						}

						.head_name {
							width: 100%;
							position: absolute;
							bottom: 0;
							left: 0;
							color: #FFFFFF;
							background-color: #1A1A1A;
							height: 40rpx;
							line-height: 40rpx;
							border-radius: 20rpx;
						}
					}

					.d_content {
						height: 150rpx;

						.license {
							width: 100%;
							height: 60rpx;
							line-height: 60rpx;
							font-weight: bold;
							color: #333333;
						}

						.model {
							width: 100%;
							height: 40rpx;
							line-height: 40rpx;
							color: #999999;
						}

						.score {
							height: 50rpx;
							align-items: center;

							.off-1 {
								color: #FFAE00;
							}
						}
					}

					.phone {
						image {
							height: 90rpx;
							margin-top: 30rpx;
						}
					}
				}

				.btn {
					width: 100%;
					padding-bottom: 50rpx;
					height: 90rpx;

					button {
						height: 90rpx;
						line-height: 90rpx;
						border-radius: 45rpx;
						font-size: 32rpx;
						color: #6CBF30;
						background-color: #FFFFFF;
						border: 1px solid #6CBF30;
					}
				}
			}

			//已确认送达
			.yqrsd,
			.yhyzf,
			.yhypj {
				.price {
					margin-top: 30rpx;
					width: 92%;
					padding: 30rpx 4%;
					height: 125rpx;
					border-radius: 10rpx 10rpx 0 0;
					background-color: #FFFFFF;
					border-bottom: 1rpx solid #ededed;

					.pay_price {
						height: 80rpx;
						line-height: 80rpx;
						color: #FF2626;
						font-size: 41rpx;

						text {
							font-weight: 500;
							color: #999999;
							margin: 0 9rpx;
						}
					}

					.yh_price {
						height: 55rpx;
						line-height: 50rpx;
						color: #333333;

						text {
							color: #FF2626;
							font-weight: bold;
							margin: 0 9rpx;
						}
					}

					.price_mx {
						height: 29rpx;
						line-height: 29rpx;
						padding: 63rpx 0;
						justify-content: flex-end;
						color: #999999;

						image {
							height: 29rpx;
							margin-left: 11rpx;
						}
					}
				}

				.driver {
					margin-top: 0;
					border-radius: 0 0 10rpx 10rpx;
				}

				.btn {
					display: flex;

					button[type="primary"] {
						width: 30%;
						padding: 0;
					}

					button[type="warn"] {
						width: 65%;
						margin-left: 5%;
						padding: 0;
						color: #FFFFFF;
						background-color: #6CBF30;
					}
				}
			}

			//用户已取消
			.yhyqx {
				.ddqxcg {
					width: 92%;
					height: 100rpx;
					border-radius: 10rpx 10rpx 0 0;
					padding: 50rpx 4%;
					margin-top: 30rpx;
					position: relative;
					bottom: -10rpx;
					z-index: 1;
					background-color: #FFFFFF;
					box-shadow: 0px 15rpx 20rpx 0px #EDEDED;

					.qxcgtt {
						color: #333333;
						font-size: 36rpx;
						height: 65rpx;
						line-height: 65rpx;
						font-weight: bold;
					}

					.kycxdc {
						height: 35rpx;
						line-height: 35rpx;
						color: #999999;
					}
				}

				.qxcgddxx {
					// width: 92%;
					position: relative;
					width: 100%;
					background-color: #FFFFFF;
					padding: 20rpx 4%;
					left: -4%;

					.row {
						height: 66rpx;
						line-height: 66rpx;

						.col-3 {
							font-weight: bold;
							font-size: 45rpx;
						}

						.col-21 {
							color: #333333;
							font-size: 28rpx;
						}
					}
				}

				.qxcgbtn {
					position: relative;
					width: 100%;
					left: -4%;
					padding: 20rpx 4% 35rpx 4%;
					background-color: #FFFFFF;

					button {
						height: 96rpx;
						line-height: 96rpx;
						border-radius: 48rpx;
						background-color: #6CBF30;
					}
				}
			}

			// 用户待评价
			.yhdpj,
			.yhdpj_tab {
				position: fixed;
				width: 100%;
				height: 100vh;
				top: 0;
				left: 0;
				z-index: 10;
				background-color: rgba(0, 0, 0, 0.4);
				transition-duration: 0.3s;
				/*     以下三值为默认值，稍后会详细介绍 */
				transition-property: all;
				transition-timing-function: ease;
				transition-delay: 0s;

				.pjDemo {
					width: 100%;
					background-color: #FFFFFF;
					border-radius: 30rpx 30rpx 0 0;
					position: absolute;
					bottom: 0;
					left: 0;

					.demo_title {
						height: 96rpx;
						line-height: 96rpx;
						color: #333333;
						font-size: 32rpx;
						border-bottom: 1rpx solid #ededed;

						image {
							height: 33rpx;
							margin-top: 32rpx;
						}
					}

					.demoRate {
						padding: 30rpx 0;
						justify-content: center;
					}

					.demoLabel {
						color: #b3b3b3;
						font-size: 26rpx;

						.col-7 {
							height: 60rpx;
							line-height: 60rpx;
							border-radius: 9rpx;
							border: 1rpx solid #b3b3b3;
							margin-bottom: 19rpx;
						}

						.active {
							color: #FFFFFF;
							border-color: #6CBF30;
							background-color: #6CBF30;
						}
					}

					.demoInput {
						width: 88%;
						padding: 0 6%;
						margin-top: 20rpx;

						textarea {
							width: calc(100% - 60rpx);
							font-size: 26rpx;
							padding: 30rpx;
							height: 180rpx;
							background-color: #F5F5F5;
							border-radius: 20rpx;
						}
					}

					.demoBtn {
						width: 88%;
						padding: 30rpx 6%;

						button {
							height: 88rpx;
							line-height: 88rpx;
							border-radius: 44rpx;
							font-size: 32rpx;
							background-color: #6CBF30;
							margin-bottom: 30rpx;
						}
					}
				}
			}
		}

		.yhdpj_tab {
			top: 120vh;
		}

		//用户已评价
		.yhypj {
			.contents {
				box-shadow: 0px 15rpx 20rpx 0px #EDEDED;
				background-color: #FFFFFF;
				margin-bottom: 30rpx;
				border-radius: 15rpx;
			}

			.driver {
				box-shadow: none;
			}

			.demoRate {
				height: 70rpx;
				line-height: 60rpx;
				color: #FFAE00;
				padding: 20rpx 0;
				justify-content: center;
			}

			.demoLabel {
				color: #b3b3b3;
				font-size: 26rpx;

				.col-7 {
					width: calc(100% / 24 * 7 - 4rpx);
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 9rpx;
					border: 1rpx solid #6CBF30;
					margin-bottom: 19rpx;
					color: #6CBF30;
					background-color: #F0F8EA;
				}
			}

			.demoInput {
				text-indent: 1em;
				width: 90%;
				line-height: 40rpx;
				padding: 0 5%;
				color: #B3B3B3;
				font-size: 26rpx;
				padding-bottom: 25rpx;
			}
		}
	}

	//支付面板
	.zfmb,
	.zfmb_tab {
		position: fixed;
		width: 100%;
		height: 100vh;
		top: 0;
		left: 0;
		z-index: 9;
		background-color: rgba(0, 0, 0, 0.4);
		transition-duration: 0.3s;
		/*     以下三值为默认值，稍后会详细介绍 */
		transition-property: all;
		transition-timing-function: ease;
		transition-delay: 0s;

		.container {
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			border-radius: 30rpx 30rpx 0 0;
			background-color: #FFFFFF;

			.title {
				height: 96rpx;
				line-height: 96rpx;
				border-bottom: 1rpx solid #ededed;

				.col-20 {
					font-size: 32rpx;
					color: #333333;
				}

				.col-3 {
					image {
						height: 33rpx;
						margin-top: 32rpx;
					}
				}
			}

			.ddxq {
				border-bottom: 1rpx solid #ededed;

				.ddjekt {
					font-size: 28rpx;
					height: 107rpx;
					line-height: 107rpx;
					color: #333333;
					font-weight: bold;
				}

				.ddzfje {
					height: 36rpx;
					line-height: 36rpx;
					font-size: 48rpx;
					color: #FF2626;
					font-weight: bold;
					margin-bottom: 40rpx;
				}

				.fyyw {
					justify-content: center;
					height: 24rpx;
					line-height: 24rpx;
					color: #999999;
					font-size: 26rpx;
					margin-bottom: 40rpx;

					image {
						height: 24rpx;
						margin-left: 15rpx;
					}
				}
			}

			.fymx {
				width: 94%;
				padding: 20rpx 3%;
				border-bottom: 1rpx solid #ededed;

				.fymxkt,
				.fyje,
				.yhq {
					height: 67rpx;
					line-height: 67rpx;
					color: #333333;
					font-size: 28rpx;
					font-weight: bold;
				}

				.fyje,
				.yhq {
					font-weight: 500;
				}

				.yhq {
					.row {
						height: 67rpx;
						line-height: 67rpx;
						color: #6CBF30;
						justify-content: flex-end;

						image {
							height: 24rpx;
							margin-top: 22rpx;
							margin-left: 15rpx;
						}
					}
				}
			}

			.btn {
				width: 94%;
				padding: 30rpx 3% 15rpx 3%;
				height: 116rpx;
				line-height: 116rpx;

				button {
					font-size: 32rpx;
					height: 96rpx;
					line-height: 96rpx;
					margin-top: 10rpx;
					border-radius: 48rpx;
					background-color: #6CBF30;
				}
			}
		}
	}

	.zfmb_tab {
		top: 120vh;
	}
	
	.login{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 19;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0,0,0,0.5);
		.button{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 300rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx 20rpx 0 0;
			button{
				position: relative;
				top: 110rpx;
				// left: 5%;
				width: 92%;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 45rpx;
			}
		}
		
	}
</style>